<template>
  <div class="traffic-progress-container">
    <div class="traffic-progress-header">
      <div class="traffic-title">
        <el-icon class="traffic-icon">
          <component :is="icon" />
        </el-icon>
        <span class="title-text">{{ title }}</span>
      </div>
      <div class="traffic-percentage">
        {{ percentage.toFixed(2) }}%
      </div>
    </div>
    
    <div class="traffic-progress-bar">
      <div 
        class="progress-fill" 
        :style="{ 
          width: `${Math.min(percentage, 100)}%`,
          backgroundColor: progressColor
        }"
      ></div>
    </div>
    
    <div class="traffic-details">
      <div class="traffic-info">
        <div class="used-info">
          <span class="used-label">{{ getUsedLabel() }}</span>
          <span class="used-value" :style="{ color: progressColor }">
            {{ formatTraffic(used) }}
          </span>
        </div>
        <div class="remaining-info">
          <span class="remaining-label">{{ getRemainingLabel() }}</span>
          <span class="remaining-value" :style="{ color: remainingColor }">
            {{ formatTraffic(remaining) }}
          </span>
        </div>
      </div>
      <div class="traffic-total">
        <span class="total-label">{{ getTotalLabel() }}</span>
        <span class="total-value">{{ formatTraffic(total) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { DataBoard, TrendCharts } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  used: {
    type: Number,
    default: 0
  },
  remaining: {
    type: Number,
    default: 0
  },
  total: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    default: 'general', // 'general' | 'directed' | 'voice' | 'sms' | 'other'
    validator: (value) => ['general', 'directed', 'voice', 'sms', 'other'].includes(value)
  },
  icon: {
    type: [String, Object],
    default: DataBoard
  }
})

// 计算百分比
const percentage = computed(() => {
  if (props.total <= 0) return 0
  return (props.used / props.total) * 100
})

// 进度条颜色
const progressColor = computed(() => {
  switch (props.type) {
    case 'general':
      return '#ff6b35' // 橙色 - 通用流量已用
    case 'directed':
      return '#ff8c42' // 浅橙色 - 定向流量已用
    case 'voice':
      return '#9c27b0' // 紫色 - 语音已用
    case 'sms':
      return '#ff9800' // 橙色 - 短信已用
    case 'other':
      return '#607d8b' // 蓝灰色 - 其他流量已用
    default:
      return '#ff6b35'
  }
})

// 剩余数据颜色
const remainingColor = computed(() => {
  switch (props.type) {
    case 'general':
      return '#4ecdc4' // 青色 - 通用流量剩余
    case 'directed':
      return '#45b7d1' // 蓝色 - 定向流量剩余
    case 'voice':
      return '#e1bee7' // 浅紫色 - 语音剩余
    case 'sms':
      return '#ffcc80' // 浅橙色 - 短信剩余
    case 'other':
      return '#b0bec5' // 浅蓝灰色 - 其他流量剩余
    default:
      return '#4ecdc4'
  }
})

// 格式化数据
const formatTraffic = (value) => {
  if (!value && value !== 0) {
    switch (props.type) {
      case 'voice':
        return '0分钟'
      case 'sms':
        return '0条'
      default:
        return '0MB'
    }
  }
  
  const numValue = parseFloat(value)
  
  switch (props.type) {
    case 'voice':
      return `${numValue}分钟`
    case 'sms':
      return `${numValue}条`
    default:
      // 流量类型，按MB/GB格式化
      if (numValue < 1024) {
        return `${numValue.toFixed(2)}MB`
      }
      const gbValue = numValue / 1024
      return `${gbValue.toFixed(2)}GB`
  }
}

// 获取标签文字
const getUsedLabel = () => {
  switch (props.type) {
    case 'voice':
      return '已用'
    case 'sms':
      return '已用'
    default:
      return '已用'
  }
}

const getRemainingLabel = () => {
  switch (props.type) {
    case 'voice':
      return '剩余'
    case 'sms':
      return '剩余'
    default:
      return '剩余'
  }
}

const getTotalLabel = () => {
  switch (props.type) {
    case 'voice':
      return '总量'
    case 'sms':
      return '总量'
    default:
      return '总量'
  }
}
</script>

<style scoped>
.traffic-progress-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.traffic-progress-container:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.traffic-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.traffic-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.traffic-icon {
  font-size: 20px;
  color: #667eea;
}

.title-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.traffic-percentage {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.traffic-progress-bar {
  width: 100%;
  height: 12px;
  background: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.traffic-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.traffic-info {
  display: flex;
  gap: 24px;
  flex: 1;
}

.used-info,
.remaining-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.used-label,
.remaining-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.used-value,
.remaining-value {
  font-size: 16px;
  font-weight: 700;
}

.traffic-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.total-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .traffic-progress-container {
    padding: 20px;
    margin-bottom: 16px;
  }
  
  .traffic-progress-header {
    margin-bottom: 12px;
  }
  
  .title-text {
    font-size: 16px;
  }
  
  .traffic-percentage {
    font-size: 20px;
  }
  
  .traffic-progress-bar {
    height: 10px;
    margin-bottom: 12px;
  }
  
  .traffic-details {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .traffic-info {
    justify-content: space-between;
    gap: 16px;
  }
  
  .traffic-total {
    align-self: center;
    min-width: 120px;
  }
  
  .used-value,
  .remaining-value,
  .total-value {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .traffic-progress-container {
    padding: 16px;
  }
  
  .traffic-info {
    flex-direction: column;
    gap: 12px;
  }
  
  .used-info,
  .remaining-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
  }
}
</style>
